import { StringGradients, sortGradient } from "./sortGradient";
type FromToGradients = { from: string; to: string };
export type ProgressGradient = { direction?: string } & (
  | StringGradients
  | FromToGradients
);
export type DirectionType = "ltr" | "rtl" | undefined;

/**
 * Then this man came to realize the truth: Besides six pence, there is the moon. Besides bread and
 * butter, there is the bug. And... Besides women, there is the code.
 *
 * @example
 *   {
 *     "0%": "#afc163",
 *     "25%": "#66FF00",
 *     "50%": "#00CC00", // ====>  linear-gradient(to right, #afc163 0%, #66FF00 25%,
 *     "75%": "#009900", //        #00CC00 50%, #009900 75%, #ffffff 100%)
 *     "100%": "#ffffff"
 *   }
 */
export const handleGradient = (
  strokeColor: ProgressGradient,
  directionConfig?: DirectionType
): React.CSSProperties => {
  const {
    from = "#3B5EEF",
    to = "#76ACF6",
    direction = directionConfig === "rtl" ? "to left" : "to right",
    ...rest
  } = strokeColor;
  if (Object.keys(rest).length !== 0) {
    const sortedGradients = sortGradient(rest as StringGradients);
    return {
      backgroundImage: `linear-gradient(${direction}, ${sortedGradients})`,
    };
  }
  return { backgroundImage: `linear-gradient(${direction}, ${from}, ${to})` };
};
